
<template>
  <div>
    selectpaymentmethod
    <van-row type="flex" align="center">
      <van-col span="2">
        <van-icon
          name="arrow-left"
          size="40"
          color="rgb(64, 150, 236)"
          @click="back"
        />
      </van-col>
      <van-col span="8" offset="6">支付订单</van-col>
    </van-row>
    <hr />
    <div class="zfleft">
      <p>需支付 <span class="je">￥24.80</span></p>
    </div>
    <hr />
    <div class="zfleft">
      <h3>支付方式</h3>
    </div>
    <hr />
    
<van-row type="flex" justify="space-between" class="box">
      <van-col>
        <i class="iconfont icon-yue"></i>
        <span>余额</span>
      </van-col>
      <van-col>
          <van-checkbox v-model="checked" />
      </van-col>
    </van-row>
    <hr />
   <van-row type="flex" justify="space-between" class="box">
      <van-col>
        <i class="iconfont icon-zhifubao"></i>
        <span>支付宝支付</span>
      </van-col>
      <van-col>
          <van-checkbox v-model="checked" />
      </van-col>
    </van-row>
    <hr>
 
   
  <van-button type="info" size="large" class="btn">立即支付</van-button>
 
    
  </div>
</template>

<script>
import "../../assets/font/iconfont.js"
import "../../assets/font/iconfont.css"

export default {
  name:"chose",
  data() {
    return {
      checked: "true",
    };
  },
  methods: {
    back(){

    }
  },
};
</script>

<style>
.btn{
  width: 300px;
  position: relative;

  top:300px;
}
.icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
}
.zfleft {
  text-align: left;
  margin-left: 30px;
}
.je {
  margin-left: 200px;
  font-weight: 600;
}
.box{
   margin-left: 20px;
}
.van-checkbox__icon{
margin-right: 30px;
}
.icon-zhifubao{
  color:rgb(46, 150, 219)
}
</style>